<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酷狗音乐 - 就是歌多</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <link rel="shortcut icon" href="https://www.kugou.com/root/favicon.ico">
    <link rel="stylesheet" href="../css/kugou.css">
</head>
<body>
    <!-- 顶头搜索栏 -->
    <div class="headerdiv">
        <div class="header_imgdiv">

        </div>
        <div class="header_inputdiv">
            <input type="text/css">
            <div class="header_input_imgdiv">
                <i class="header_input_img"></i>
            </div>
        </div>
        <div class="header_uldiv">
            <ul class="header_uldiv_ul">
                <li class="header_uldiv_ul_li">客服中心</li>&nbsp;&nbsp;&nbsp;
                <li class="header_uldiv_ul_li">招纳贤士</li>&nbsp;&nbsp;&nbsp;
                <li class="header_uldiv_ul_li">会员中心</li>&nbsp;&nbsp;&nbsp;
                <li class="header_uldiv_ul_li">商务合作</li>&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;
            </ul>
        </div>
        <div class="header_adiv">
            <a href="#" style="text-decoration: none; color: white;"><b>登录</b></a>
        </div>
    </div>
    <div class="cardiv">
        <div class="car_headerdiv">
            <div class="car_header_leftdiv">
                <a href="#" style="text-decoration: none;">
                    首页
                </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#" style="text-decoration: none;">
                    榜单
                </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#" style="text-decoration: none;">
                    听书
                </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#" style="text-decoration: none;">
                    下载酷狗
                </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#" style="text-decoration: none;">
                    听歌识曲
                </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#" style="text-decoration: none;" id="gddiv"><!--hover
                    显示的div-->
                    更多
                </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <div style="color: white;" id="gddiv_ul">
                        <ul style="list-style-type: none;">
                            <li>电台</li>
                            <li>MV</li>
                            <li>歌单</li>
                            <li>歌手</li>
                        </ul>
                    </div>
            </div>
            <script type="text/javascript">
                $(document).ready(function(){
                    $("#gddiv").mouseleave(function(){
                        $("#gddiv_ul").hide();
                    });
                    $("#gddiv").mouseenter(function(){
                        $("#gddiv_ul").show();
                    });
                });
            </script>
            <div class="car_header_rightdiv" >
                <!--id为文字拼音手写-->
                <a href="" style="text-decoration: none;" id="zb">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;直播
                </a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="" style="text-decoration: none;" id="sc">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;商城
                </a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="" style="text-decoration: none;" id="yyr">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;音乐人
                </a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="" style="text-decoration: none;" id="dls">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;代理商
                </a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="" style="text-decoration: none;" id="zbdt">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;主播电台
                </a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="" style="text-decoration: none;" id="kfpt">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;开放平台
                </a>&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
        </div>
        <div class="car_centerdiv">
            <div class="wrap" id='wrap'>
                <ul id="pic">
                <li><img src="../img/第一张.jpg" alt=""></li>
                <li><img src="../img/第二张.jpg" alt=""></li>
                <li><img src="../img/第三张.jpg" alt=""></li>
                <li><img src="../img/第四张.jpg" alt=""></li>
                <li><img src="../img/第五张.jpg" alt=""></li> 
                </ul>
                <ol id="list">
                <li class="on"><div class="bnt">1</div></li>
                <li><div class="bnt">2</div></li>
                <li><div class="bnt">3</div></li>
                <li><div class="bnt">4</div></li>
                <li><div class="bnt">5</div></li>
                </ol>
            </div>
            <script type="text/javascript">
                window.onload=function(){
                    var wrap=document.getElementById('wrap'),
                    pic=document.getElementById('pic').getElementsByTagName("li"),
                    list=document.getElementById('list').getElementsByTagName('li'),
                    index=0,
                    timer=null;
                    
                    // 定义并调用自动播放函数
                    timer = setInterval(autoPlay, 2000);
                    
                    // 鼠标划过整个容器时停止自动播放
                    wrap.onmouseover = function () {
                    clearInterval(timer);
                    }
                    
                    // 鼠标离开整个容器时继续播放至下一张
                    wrap.onmouseout = function () {
                    timer = setInterval(autoPlay, 2000);
                    }
                    // 遍历所有数字导航实现划过切换至对应的图片
                    for (var i = 0; i < list.length; i++) {
                    list[i].onmouseover = function () {
                    clearInterval(timer);
                    index = this.innerText - 1;
                    changePic(index);
                    };
                    };
                    
                    function autoPlay () {
                    if (++index >= pic.length) index = 0;
                    changePic(index);
                    }
                    
                    // 定义图片切换函数
                    function changePic (curIndex) {
                    for (var i = 0; i < pic.length; ++i) {
                    pic[i].style.display = "none";
                    list[i].className = "";
                    }
                    pic[curIndex].style.display = "block";
                    list[curIndex].className = "on";
                    }
                    
                };
            </script>
            <div id="carleft"></div>
            <div id="carright"></div>
            <div id="carbottom">
                <div id="dy"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <div id="dr"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <div id="ds"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <div id="dsi"></div>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <div id="dw"></div>
            </div>
        </div>
        
        <div class="car_bottomdiv">
            <a href="" style="text-decoration: none;" id="PC">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                下载PC版
            </a>
            <a href="" style="text-decoration: none;" id="iPhone">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                下载iPhone版
            </a>
            <a href="" style="text-decoration: none;" id="Android">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                下载Android版
            </a>
        </div>
    </div>
    <!--主体内容-->
    <div class="center">
        <div class="handpick">
            <div>
                <h2><span style="color: #029df5;">精选</span>歌单</h2>
            </div>
            <a href="#" style="text-decoration: none; font-size: 12px; 
            color: gray; float: right; top: -55px; right: 20px;">更多</a>
        </div>
        <div class="handpick_left" >
            <div class="handpick_left_url">
                <span id="view">663.5万</span>
            </div>
            <div class="handpick_left_url_bottom">
                <p id="introduce">乡村之旅：安静惬意-与自然同在</p>
                <p id="manner">蔓若</p>
            </div>
            <div class="handpick_left_hover">
                <div class="hover_url"></div>
            </div>
        </div>
        <div class="handpick_right">
            <div class="handpick_right_div" style="background: url(../img/1.jpg); background-repeat: no-repeat;">
                <div class="handpick_right_hover">
                    <div class="hover_url">
                    </div>
                </div>
                <div class="handpick_left_url">
                    <span id="view">663.5万</span>
                </div>
                <div class="handpick_right_bottom" >
                    <p id="introduce">青春回忆...</p>
                    <p id="manner">念安娜</p>
                </div>
            </div>
            <div class="handpick_right_div" style="background: url(../img/2.jpg); background-repeat: no-repeat;" >
                <div class="handpick_right_hover">
                    <div class="hover_url"></div>
                </div>
                <div class="handpick_left_url">
                    <span id="view">663.5万</span>
                </div>
                <div class="handpick_right_bottom" >
                    <p id="introduce">披荆斩棘...</p>
                    <p id="manner">胖汪追综</p>
                </div>
            </div>
            <div class="handpick_right_div" style="background: url(../img/3.jpg); background-repeat: no-repeat;">
                <div class="handpick_right_hover">
                    <div class="hover_url"></div>
                </div>
                <div class="handpick_left_url">
                    <span id="view">663.5万</span>
                </div>
                <div class="handpick_right_bottom" >
                    <p id="introduce">丹心赋：...</p>
                    <p id="manner">国风新语</p>
                </div>
            </div>
            <div class="handpick_right_div" style="background: url(../img/4.jpg); background-repeat: no-repeat;">
                <div class="handpick_right_hover">
                    <div class="hover_url"></div>
                </div>
                <div class="handpick_left_url">
                    <span id="view">663.5万</span>
                </div>
                <div class="handpick_right_bottom" >
                    <p id="introduce">巅峰ing...</p>
                    <p id="manner">欧美Ku乐</p>
                </div>
            </div>
        </div>
        <div class="example">
            <div class="example_handpick">
                <div >
                    <h2><span style="color: #029df5;">热门</span>榜单</h2>
                </div>
                <a href="#" style="text-decoration: none; font-size: 12px; 
                color: gray; float: right; top: -55px; right: 5px;">更多</a>
            </div>
            <div class="example_bottomdiv" >
                <div class="example_div">
                    <div class="example_div_div">
                        <img src="../img/热榜 飙升榜.jpg" alt="">
                        <div  class="example_div_div_hover">
                            <div class="example_div_div_hover_img"></div>
                        </div>
                    </div>
                    <span style="left: 105px; top: -83px; z-index: 1;" > <b>酷狗飙升榜</b> </span>
                    <br> <span style="left: 105px; top: -83px; z-index: 1;">1.那一年（Live）</span><span style="left: 105px; top: -83px; z-index: 1; ">-大张伟...</span>
                    <br> <span style="left: 105px; top: -83px; z-index: 1;">2.谢谢你，曾经用心骗过我</span><span style="left: 105px; top: -83px; z-index: 1;">-...</span>
                </div>
                <div class="example_div" style="top: 8px;" >
                    <div class="example_div_div">
                        <img src="../img/热榜 top500.jpg" alt="">
                        <div  class="example_div_div_hover">
                            <div class="example_div_div_hover_img"></div>
                        </div>
                    </div>
                    <span style="left: 105px; top: -83px; z-index: 1;" > <b>酷狗TOP500</b> </span>
                    <br> <span style="left: 105px; top: -83px; z-index: 1;">1.一路生花</span><span style="left: 105px; top: -83px; z-index: 1; ">-温亦心</span>
                    <br> <span style="left: 105px; top: -83px; z-index: 1;">2.阿衣莫</span><span style="left: 105px; top: -83px; z-index: 1;">-阿吉太组合</span>
                </div>
                <div class="example_div" style=" position: absolute; top: 212px;" >
                    <div class="example_div_div">
                        <img src="../img/热榜  网路红歌.jpg" alt="">
                        <div  class="example_div_div_hover">
                            <div class="example_div_div_hover_img"></div>
                        </div>
                    </div>
                    
                    <span style="left: 105px; top: -83px; z-index: 1;" > <b>网路红歌榜</b> </span>
                    <br> <span style="left: 105px; top: -83px; z-index: 1;">1.一起吹过晚风的街</span><span style="left: 105px; top: -83px; z-index: 1; ">-聂...</span>
                    <br> <span style="left: 105px; top: -83px; z-index: 1;">2.如</span><span style="left: 105px; top: -83px; z-index: 1;">-善宇</span>
                </div>
            </div>
        </div>
    </div>
    <!--底部网页信息-->
    <div class="bottom">
        <div class="bottom_top">
            <a href="#" class="bottom_top_a">关于酷狗&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
            <a href="#" class="bottom_top_a">监督举报&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
            <a href="#" class="bottom_top_a">商务合作&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
            <a href="#" class="bottom_top_a">广告服务&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
            <a href="#" class="bottom_top_a">投诉指引&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
            <a href="#" class="bottom_top_a">隐私政策&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
            <a href="#" class="bottom_top_a">儿童隐私政策&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
            <a href="#" class="bottom_top_a">用户服务协议&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
            <a href="#" class="bottom_top_a">酷狗音乐人&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
            <a href="#" class="bottom_top_a">酷狗星耀推歌&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
            <a href="#" class="bottom_top_a">招聘信息&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
            <a href="#" class="bottom_top_a">客服中心&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;</a>
            <a href="#" class="bottom_top_a">用户体验提升计划</a>
        </div>
        <div class="bottom_center">
            <a href="#" class="bottom_center_a">白眉大侠&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">茅山捉鬼人&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">夜听FM&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">贝瓦故事&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">文武贝流行刚请（1）&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">郭德纲&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">原创静心舒眠纯音乐&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">黑水公园&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">舒烟电台&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">晚安故事盒子&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">哄睡故事&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">隋唐演义&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">程一电台&nbsp;&nbsp;&nbsp;</a><br>
            <a href="#" class="bottom_center_a">宝宝巴土儿歌&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">这首歌，等你来听&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">斗罗大陆&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">水浒传&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">星空下的钢琴曲1&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">盗墓笔记&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">抬棺匠&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">晚安故事盒子&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">无敌剑域&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">治疗师 | 3D助眠解压沉浸式音乐&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">小猪佩奇&nbsp;&nbsp;&nbsp;</a><br>
            <a href="#" class="bottom_center_a">鬼吹灯金典系列&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">上门龙婿&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">超牛女婿&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">奇葩修真天才&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">治愈失眠：雷雨声&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">蕊希电台&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">成语故事专题&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">儿童故事专题&nbsp;&nbsp;&nbsp;</a>
            <a href="#" class="bottom_center_a">鬼吹灯专题&nbsp;&nbsp;&nbsp;</a>
        </div>
        <p class=".bottom_center_p"  style=" padding-top: 12px; color: #b1b3b9;font-size: 13px;top: 60px;">
            我们致力于推动网络正版音乐发展，相关版权合作请联系copyrights@kugou.com
        </p>
        <p class=".bottom_center_p"  style=" padding-top: 12px;color: #b1b3b9;font-size: 13px;top: 60px;">
            信息网络传播视听节目许可证 1910564 增值电信业务经营许可证粤B2-20060339&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="#" style="text-decoration: none;color: #b1b3b9;">粤ICP备09017694号<img src="../img/icp.png" alt=""></a>
        </p>
        <p class=".bottom_center_p"  style="padding-top: 12px;color: #b1b3b9;font-size: 13px;top: 60px;">
            广播电视节目制作经营许可证（粤）字第01270号&nbsp;&nbsp;&nbsp;&nbsp;营业性演出许可证穗天演440106026   
        </p>
        <p class=".bottom_center_p"  style="padding-top: 12px;color: #b1b3b9;font-size: 13px;top: 60px;">
            穗公网监备案证第44010650010167&nbsp;&nbsp;&nbsp;&nbsp;互联网药品信息服务资格证编号（粤）-非经营性-2012-0018
            <a href="#" style="text-decoration: none;color: #b1b3b9;">粤公网安备 44010602000141号<img src="https://www.kugou.com/common/images/icon_yuewangga1.png" alt=""></a>
        </p>
        <p class=".bottom_center_p"  style="padding-top: 12px;color: #b1b3b9;font-size: 13px;top: 60px;">
            <a href="" style="text-decoration: none;color: #b1b3b9;">互联网不良信息举报中心：www.12377.cn</a>
            &nbsp;&nbsp;&nbsp;&nbsp;酷狗不良信息举报邮箱：jubao_music@kugou.net&nbsp;&nbsp;&nbsp;举报电话：020-22043248（值班时间：9:30-18:30）&nbsp;&nbsp;&nbsp;  客服邮箱：kefu@kugou.net
        </p>
        <p class=".bottom_center_p"  style="padding-top: 12px;color: #b1b3b9;font-size: 13px;top: 60px;">
            Copyright  ©  2004-2021 KuGou-Inc.All Rights Reserved
        </p>
    </div>
</body>
</html>